<template>
	<view class="content">
		<view class="from-info-box">
			<view class="from-item-box">
				<view class="title-box"><text>姓名</text></view>
				<view class="input-box"><input type="text" v-model="fromInfo.name" placeholder="请提供您的真实姓名" placeholder-style="color:#CCC" /></view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>性别</text></view>
				<view class="input-box" @click="bindSexSele">
					<input type="text" v-model="sex" placeholder="请选择您的性别" :disabled="true" placeholder-style="color:#CCC" />
					<image src="../static/icon12.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>电话</text></view>
				<view class="input-box"><input type="number" maxlength="11" v-model="fromInfo.phone" placeholder="请提供您的联系电话" placeholder-style="color:#CCC" /></view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>年龄</text></view>
				<view class="input-box" @click="bindAgeSele">
					<input type="text" v-model="fromInfo.age" placeholder="请选择您的年龄" :disabled="true" placeholder-style="color:#CCC" />
					<image src="../static/icon12.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>球具使用品牌（可多选）</text></view>
				<view class="select-con">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" active-color="#000000" v-for="(item, index) in list.ball_tool" :key="index" :name="item.title">
							{{ item.title }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>差点</text></view>
				<view class="input-box" @click="bindAlmostSele">
					<input type="text" v-model="fromInfo.almost" placeholder="请选择差点" :disabled="true" placeholder-style="color:#CCC" />
					<image src="../static/icon12.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>选择参与活动（可多选）</text></view>
				<view class="select-con">
					<u-checkbox-group @change="checkboxGroupChange2">
						<u-checkbox v-model="item.checked" active-color="#000000" v-for="(item, index) in list.activity_list" :key="index" :name="item.title">
							{{ item.title }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box"><text>是否参加晚宴</text></view>
				<view class="input-box" @click="bindIsDinnerSele">
					<input type="text" v-model="is_dinner" placeholder="请选择是否参加晚宴" :disabled="true" placeholder-style="color:#CCC" />
					<image src="../static/icon12.png" mode="heightFix"></image>
				</view>
			</view>
			<!-- <view class="from-item-box">
				<view class="title-box">
					<text>备注</text>
				</view>
				<view class="input-box">
					<textarea v-model="fromInfo.remarks" placeholder="请填写备注" placeholder-style="color:#CCC"></textarea>
				</view>
			</view> -->
		</view>
		<view class="tip-box">
			<view>*组队说明</view>
			<view class="tip-box-text">我们将依据您填写的信息进行组队匹配</view>
		</view>
		<!-- <view class="agreement" @click="isAgree = !isAgree">
			<image :src="`/static/icon_check${isAgree ? 'ed' : ''}.png`" mode=""></image>
			<view class="text">
				已阅读并了解
				<text @click="toAgreement">《条例》</text>
			</view>
		</view> -->
		<view class="agreement-two">
			<view class="agreement-two-gou" @click="isAgree = !isAgree">
				<image :src="`/static/icon_check${isAgree ? 'ed' : ''}.png`" mode=""></image>
				<text>{{ activityInfo.agreement_tips }}</text>
			</view>
			<view class="agreement-item">
				<text @click="toAgreement">隐私协议</text>
				<image class="agreement-item-icon" src="../static/arrow_right.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-rightward" color="#000000" size="32" :custom-style="{'width':'100rpx'}"></u-icon> -->
			</view>
			<view class="agreement-item">
				<text @click="toAgreementTwo">{{ activityInfo.agreement_title }}</text>
				<image class="agreement-item-icon" src="../static/arrow_right.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-rightward" color="#000000" size="32" :custom-style="{'width':'100rpx'}"></u-icon> -->
			</view>
		</view>
		<!-- <view class="code_box"><image src="../../static/member_icon/icon19.jpg" mode=""></image></view> -->
		<view class="code_box"><image :src="activity_pic" mode="aspectFill"></image></view>
		<view class="bottom-plate-box">
			<!-- 底部but -->
			<view class="bottom-but-box" @click="bindSubmit(1)"><text>提交报名</text></view>
		</view>
		<!-- 关注公众号 -->
		<u-modal v-model="show7" title="长按识别二维码" @confirm="confirm">
			<view class="slot-content"><image class="official-account" :show-menu-by-longpress="true" :src="activityInfo.kf_qrcode"></image></view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sex: '', //性别
			fromInfo: {
				//表单信息
				activity_id: 0,
				name: '',
				sex: 0,
				phone: '',
				remarks: '',
				age: '',
				almost: ''
			},

			ageList: ['20岁以下', '20-30岁', '31-40岁', '41-50岁', '50岁以上'], // 年龄选择
			list: {}, //球具使用品牌
			almostList: ['单差', '中差点', '高差点'],
			is_dinner: '', //是否参与晚宴
			isAgree: false, //协议
			id: '',
			show7: false,
			activityInfo: {}, //活动详情
			activity_pic: ''//图片
			
		};
	},
	onLoad(options) {
		this.fromInfo.activity_id = options.activityId;
		this.getList();
		this.getConfigList()
	},
	onShow() {
		this.$u.api.activityDetailApi({id:this.fromInfo.activity_id}).then(res=>{
			if(res.code==1){
				console.log('活动详情：',res);
				this.activityInfo = res.data;
			}
		});
	},
	methods: {
		// 前往用户协议
		toAgreement: function() {
			uni.navigateTo({
				url: '/pageMember/activeInstructition'
			});
		},
		// 前往协议
		toAgreementTwo() {
			uni.navigateTo({
				url: `./activeContent?content=${encodeURIComponent(JSON.stringify(this.activityInfo.agreement_content))}`
			});
		},
		// 报名活动底部图片
		getConfigList: function () {
			uni.showLoading({
				title: '加载中'
			})
			this.$u.api.configListApi().then(res=>{
				if(res.code==1){
					console.log(res)
					this.activity_pic = res.data.activity_pic
				}
			});
		},
		getList() {
			//球具使用品牌
			this.$u.api.ballToolBrandApi().then(res => {
				if (res.code == 1) {
					console.log('ok', res);
					res.data.activity_list.filter(item => {
						this.$set(item, 'checked', false);
					});
					res.data.ball_tool.filter(item => {
						this.$set(item, 'checked', false);
					});
					this.list = res.data;
					console.log('this.list', this.list);
				}
			});
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			this.fromInfo.brand = e.join(',');
			console.log('this.fromInfo.brand', this.fromInfo.brand);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange2(e) {
			this.fromInfo.activity = e.join(',');
			console.log('this.fromInfo.activity', this.fromInfo.activity);
		},
		bindSexSele() {
			//性别选择
			let _this = this;
			uni.showActionSheet({
				// itemList: ['男', '女', '青少年'],
				itemList: ['男', '女'],
				success(res) {
					_this.fromInfo.sex = res.tapIndex + 1;
					if (_this.fromInfo.sex == 1) {
						_this.sex = '男';
					} else if (_this.fromInfo.sex == 2) {
						_this.sex = '女';
					}
					//  else {
					// 	_this.sex = '青少年';
					// }
					console.log(_this.fromInfo.sex, '------===');
				}
			});
		},
		bindAgeSele() {
			//年龄选择
			let _this = this;
			uni.showActionSheet({
				itemList: ['20岁以下', '20-30岁', '31-40岁', '41-50岁', '50岁以上'],
				success(res) {
					console.log(res);
					_this.fromInfo.age = _this.ageList[res.tapIndex];

					console.log(_this.fromInfo.age, '------===');
				}
			});
		},
		bindAlmostSele() {
			//差点选择
			let _this = this;
			uni.showActionSheet({
				itemList: ['单差', '中差点', '高差点'],
				success(res) {
					console.log(res);
					_this.fromInfo.almost = _this.almostList[res.tapIndex];

					console.log(_this.fromInfo.almost, '------===');
				}
			});
		},
		bindIsDinnerSele() {
			//是否参与晚宴
			let _this = this;
			uni.showActionSheet({
				itemList: ['参与', '不参与'],
				success(res) {
					
					if (res.tapIndex == 0) {
						_this.is_dinner = '参与';
						_this.fromInfo.is_dinner = 1;
					} else {
						_this.is_dinner = '不参与';
						_this.fromInfo.is_dinner = 0;
					}
					console.log(_this.fromInfo.is_dinner, '------===');
				}
			});
		},
		confirm() {
			this.$gourl(`./success?status=${this.id}`);
		},
		bindSubmit(id) {
			this.id = id
			//表单提交
			let { name, sex, phone, remarks } = this.fromInfo;
			let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if (name == '') {
				this.$showToast('请输入您的真实姓名');
				return;
			}
			if (sex == '') {
				this.$showToast('请选择您的性别');
				return;
			}
			if (phone == '' || phone == undefined || phone == null) {
				this.$showToast('请输入您的电话号码');
				return;
			} else {
				if (!reg.test(phone) && phone != '') {
					this.$showToast('请输入正确的电话号码');
					return;
				}
			}
			const { isAgree } = this;
			if (!isAgree) {
				uni.showToast({
					title: '请阅读协议',
					icon: 'none'
				});
				return;
			}
			// if(remarks==""){
			// 	this.$showToast("请输入备注");
			// 	return
			// }

			uni.showLoading({
				title: '提交中...'
			});
			this.$u.api.signUpApi(this.fromInfo).then(res => {
				if (res.code == 1) {
					console.log('ok', res);
					this.show7 = true;
					// setTimeout(()=>{
					// this.$gourl(`./success?status=${id}`);

					// },1500);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: calc(100vh - 120rpx);
	overflow: hidden;
	overflow-y: auto;
	font-family: Microsoft YaHei;
	box-sizing: border-box;

	.from-info-box {
		padding: 30rpx;

		.from-item-box {
			padding: 20rpx 0;

			.title-box {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.input-box {
				position: relative;
				width: 100%;

				input {
					font-size: 30rpx;
					font-weight: 400;
					padding: 30rpx;
					border: 1rpx solid #000;
					border-radius: 20rpx;
				}

				textarea {
					width: 90%;
					font-size: 30rpx;
					font-weight: 400;
					padding: 30rpx;
					border: 1rpx solid #000;
					border-radius: 20rpx;
				}

				image {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 30rpx;
					height: 30rpx;
				}
			}

			.select-con {
				padding: 30rpx;
			}
		}
	}

	.bottom-plate-box {
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		padding: 20rpx;
		background: #fff;

		.bottom-but-box {
			width: 100%;
			padding: 25rpx 0;
			background: #000;
			font-size: 30rpx;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			border-radius: 50rpx;
		}
	}

	.tip-box {
		padding: 0 30rpx;

		.tip-box-text {
			color: #ff0000;
			text-indent: 16rpx;
		}
	}

	.agreement {
		display: flex;
		justify-content: center;
		margin: 60rpx 0 0 0;
		padding-bottom: 30rpx;
		align-items: center;

		image {
			width: 24rpx;
			height: 24rpx;
			margin: 0 15rpx 0 0;
		}
		
		.text {
			font-size: 22rpx;

			text {
				color: #2e38f6;
			}
		}
	}
	.agreement-two {
		display: flex;
		flex-direction: column;
		margin: 60rpx 0 0 0;
		padding: 0 30rpx 30rpx 30rpx;
		image {
			width: 24rpx;
			height: 24rpx;
			margin: 0 15rpx 0 0;
		}
		.agreement-item {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.agreement-item-icon {
				width: 60rpx;
			}
			text {
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
		.text {
			font-size: 22rpx;
		
			text {
				color: #2e38f6;
			}
		}
	}

	.code_box {
		width: 100%;

		image {
			width: 100%;
		}
	}
	// 关注公众号
	.slot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		.official-account {
			width: 400rpx;
			height: 400rpx;
		}
	}
}
</style>
